<template>
  <el-form label-width="100px" :model="gateway" ref="form" :rules="rules">
    <el-form-item label="IP">
        <el-input v-model="gateway.ip" disabled></el-input>
    </el-form-item>
      <el-form-item label="名称"  prop="name">
        <el-input v-model="gateway.name"></el-input>
    </el-form-item>
    <el-form-item label="SN码">
        <span>{{gateway.sn}}</span>
    </el-form-item>
    <el-form-item label="类型" prop="transfer_type">
      <el-select v-model="gateway.transfer_type"  class="width-100">
        <el-option 
          v-for="item in SYS_PARAMS.transfer_type"
          :key="item.name+item.code"
          :label="item.name"
          :value="item.name"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="协议" prop="transfer_protocol">
      <el-select v-model="gateway.transfer_protocol"  class="width-100" @change="transferProtocolChange">
        <el-option 
          v-for="item in SYS_PARAMS.transfer_protocol"
          :key="item.name+item.code"
          :label="item.name"
          :value="item.name"
        ></el-option>
      </el-select>
    </el-form-item>


    <div v-if="gateway.transfer_protocol=='mqtt'">
      <el-form-item label="服务器IP" prop="server_ip">
        <el-input v-model="gateway.server_ip"></el-input>
      </el-form-item>
      <el-form-item label="端口号" prop="server_port">
          <el-input v-model="gateway.server_port"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="user">
          <el-input v-model="gateway.user"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
          <el-input type="pwd" v-model="gateway.pwd"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
          <el-input type="pwd" v-model="ackpwd" @blur="ackpwdBlur"></el-input>
      </el-form-item>
      <el-form-item label="QOS" prop="QOS">
        <el-select v-model="gateway.QOS"  class="width-100">
          <el-option 
            v-for="item in SYS_PARAMS.QOS"
            :key="item.name+item.code"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </div>


    <div v-if="gateway.transfer_protocol=='opcua'" >
      <el-form-item label="IP地址" prop="server_ip">
        <el-input v-model="gateway.server_ip"></el-input>
      </el-form-item>
      <el-form-item label="端口号" prop="server_port">
        <el-input v-model="gateway.server_port"></el-input>
      </el-form-item>
    </div>

    <div v-if="gateway.transfer_protocol=='bacnet'">
      <el-form-item label="服务名" prop="serverName">
        <el-input v-model="gateway.serverName"></el-input>
      </el-form-item>
      <el-form-item label="服务ID" prop="server_id">
          <el-input v-model="gateway.server_id"></el-input>
      </el-form-item>
      <el-form-item label="端口号" prop="server_port">
          <el-input v-model="gateway.server_port"></el-input>
      </el-form-item>
    </div>
    <div class="form-button">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
    </div>
  </el-form>
</template>
<script>
import {mapGetters} from 'vuex';
import {
  addGatewayApi,
  updateGatewayApi
} from '@/api/setting'
export default {
  name: 'form-gateway',
  props:{
    data: Object
  },
  computed: {
    ...mapGetters(['SYS_PARAMS'])
  },
  watch:{
    data:{
      immediate: true,
      handler(){
        this.gateway = this.data;
      }
    }
  },
  data(){
    return {
      gateway:{
        ip: '',
        name: '',
        SN: '',
        transfer_type: '网口',
        transfer_protocol: 'mqtt',
        QOS: 'QOS0'
      },
      rules: {
      },
      baseRules: {
        name:[{required: true, trigger: 'blur', message: '请输入网关名称'}],
        transfer_type:[{required: true, trigger: 'blur', message: '请选择网关类型'}],
        transfer_protocol:[{required: true, trigger: 'blur', message: '请选择网关协议'}],
      },
      mqttRules:{
        server_ip:[{required: true, trigger: 'blur', message: '请输入IP地址'}],
        server_port:[{required: true, trigger: 'blur', message: '请输入端口号'}],
        user:[{required: true, trigger: 'blur', message: '请输入用户名'}],
        pwd:[{required: true, trigger: 'blur', message: '请输入密码'}],
        QOS:[{required: true, trigger: 'blur', message: '请选择QOS'}],
      },
      opcuaRules:{
        server_ip:[{required: true, trigger: 'blur', message: '请输入IP地址'}],
        server_port:[{required: true, trigger: 'blur', message: '请输入端口号'}],
      },
      bacnetRules:{
        serverName:[{required: true, trigger: 'blur', message: '请输入服务名'}],
        server_port:[{required: true, trigger: 'blur', message: '请输入端口号'}],
        server_port:[{required: true, trigger: 'blur', message: '请输入端口号'}],
      },
      loading: false,
      ackpwd: ''

    }
  },
  mounted(){
    this.transferProtocolChange(this.gateway.transfer_protocol)
  },
  methods: {
    cancel(){
      this.$emit('close')
    },
    confirm(){
      if(this.ackpwd != this.gateway.pwd){
        this.$message({
          type: 'error',
          message: '两次输入的密码不一致，请重新输入'
        })
        return;
      }
      this.$refs.form.validate( valid => {
        if(valid){
          this.loading = true;
          if(this.gateway.id) this.updateGateway();
          else this.addGateway();
        }
      })
    },
    addGateway(){
      addGatewayApi(this.gateway).then(res => {
        this.loading = false;
        if(res.code == 0){
          this.$message({type: 'success', message: '提交成功'})
          this.$emit('refresh')
          this.$emit('close')
        }
      })
    },
    updateGateway(){
      updateGatewayApi(this.gateway).then(res => {
        this.loading = false;
        if(res.code == 0){
          this.$message({type: 'success', message: '提交成功'})
          this.$emit('refresh')
          this.$emit('close')
        }
      })
    },
    ackpwdBlur(){
      if(this.ackpwd != this.gateway.pwd){
        this.$message({
          type: 'error',
          message: '两次输入的密码不一致，请重新输入'
        })
      }
    },
    transferProtocolChange(val){
      this.rules = {...this.baseRules, ...this[val+'Rules']}
    }
  }
}
</script>
<style  scoped>
.form-button{
  margin-left: 30px;
  position: absolute;
  bottom: 20px;
}
</style>
